<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"/>
    <script
            src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
            crossorigin="anonymous"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" th:href="@{jquery-confirm.min.css}"/>
    <script th:src="@{jquery-confirm.min.js}"></script>

    <style>
        td {word-break: break-all;}
    </style>
</head>
<body>

<div>

    <!-- Nav tabs -->
    <!--/*@thymesVar id="spaceItem" type="com.netease.domain.NamespaceItem"*/-->
    <!--/*@thymesVar id="serviceItem" type="com.netease.domain.MicroserviceItem"*/-->
    <ul class="nav nav-tabs" role="tablist" id="myTabs">
        <li role="presentation" th:each="spaceItem:${spaceList}"><a aria-controls="home" role="tab" data-toggle="tab" th:href="'#'+${spaceItem.display_name}" th:text="${spaceItem.display_name}">Home</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" th:each="spaceItem:${spaceList}" th:id="${spaceItem.display_name}">
            <table class="table">
                <tr>
                    <th>服务 id</th>
                    <th>服务名称</th>
                    <th>服务状态</th>
                    <th>副本数</th>
                    <th>0（无状态）/1（有状态）</th>
                    <th>容器端口</th>
                    <th>服务端口</th>
                    <th>停服标识</th>
                    <th>操作</th>
                </tr>
                <!--/*@thymesVar id="portItem" type="com.netease.domain.MicroserviceItem.Port_maps"*/-->
                <tr th:each="serviceItem:${spaceItem.serviceList}" th:onclick="'javascript:itemClick(this,'+ ${serviceItem.id}+')'">
                    <td th:text="${serviceItem.id}"></td>
                    <td th:text="${serviceItem.service_name}"></td>
                    <td th:text="${serviceItem.status}"></td>
                    <td th:text="${serviceItem.replicas}"></td>
                    <td th:text="${serviceItem.stateful}"></td>
                    <td> <span th:each="portItem:${serviceItem.port_maps}" th:text="${portItem.source_port}"></span> </td>
                    <td> <span th:each="portItem:${serviceItem.port_maps}" th:text="${portItem.dest_port}"></span> </td>
                    <td th:text="${serviceItem.stop_service}"></td>
                    <!--<td th:if="${serviceItem.stateful==1}"><Button type="button" class="btn btn-default btn-sm" onclick="rebootServiceClick(event,123,'restart')">重启</Button></td>-->
                    <td th:if="${serviceItem.stateful==1}">
                        <Button type="button" class="btn btn-default btn-sm" th:onclick="'rebootServiceClick(this,'+${serviceItem.id}+',\'restart\')'">重启</Button>
                        <Button type="button" class="btn btn-default btn-sm" th:onclick="'rebootServiceClick(this,'+${serviceItem.id}+',\'hard_reboot\')'">冷重启</Button>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div class="panel panel-default">
                        <div class="panel-heading">服务详情</div>
                        <div class="panel-body" id="myDetail">
                        </div>
                    </div>

                    <!--<table class="table">-->
                        <!--<tr><td>%1</td><td>%2</td></tr>-->
                        <!--<tr><th>容器名称</th><th>镜像地址</th><th>镜像仓库名称</th><th>镜像tag</th><th>cpu占比</th><th>内存占比</th><th>容器运行时id列表</th></tr>-->
                        <!--<tr><td>%1</td><td>%2</td><td>%3</td><td>%4</td><td>%5</td><td>%6</td><td>%7</td></tr>-->
                    <!--</table>-->
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>
</body>
<script type="text/javascript">
    $('#myTabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
    var lastActive;
    function itemClick(el,item){
        if(lastActive) {
            $(lastActive).removeClass("active");
        }
        $(el).addClass("active");
        lastActive = el;

        console.log(el);
        console.log(item);
        $.get("api/service/"+item, function (response) {
            var rowTemp1 = "<tr><td>%1</td><td>%2</td></tr>";
            var rowTemp2 = '<tr><td>%0</td><td>%1</td><td>%2</td><td>%3</td><td>%4</td><td>%5</td><td>%6</td><td>%7</td></tr>';
            var html = '<table class="table">';
            html += rowTemp1.replace("%1", "公网IP").replace("%2", response.service_info.pub_ip);
            html += "</table>";

            html += '<table class="table">';
            html += '<tr><th>容器名称</th><th>镜像地址</th><th>镜像仓库名称</th><th>镜像tag</th><th>cpu占比</th><th>内存占比</th><th>容器运行时id列表</th></tr>';
            for (var i in response.service_container_infos){
                var container = response.service_container_infos[i];
                html += rowTemp2.replace("%0", container.container_id).replace("%1", container.container_name).replace("%2", container.image_path).replace("%3", container.repo_name).replace("%4", container.image_tag).replace("%5", container.cpu_weight).replace("%6", container.memory_weight).replace("%7", container.docker_container_ids);
            }
            html += "</table>";
            $('#myDetail').html(html);

            console.log(response);
            $('#myModal').modal({
                //keyboard: false
            });
        });
    }
    function rebootServiceClick(el, id, option) {
        event.stopPropagation();

        $.confirm({
            title: 'Confirm!',
            content: '是否要重启？',
            buttons: {
                confirm: function () {
                    // 重启
                    $(el).attr('disabled', 'disabled');
                    $.ajax({
                        url: "api/service/"+id+"/restart",
                        type: 'PUT',
                        data: "option="+option,
                        success: function(response, status) {
                            console.log(response);
                            console.log(status);
                        },
                        error: function (xhr, status, error) {
                            console.log("error" + xhr);
                            console.log(status);
                            console.log(error);
                        }
                    });

                    // 判断重启是否完成
                    var interval = setInterval(function () {
                        $.get("api/service/"+id, function (response) {
                            console.log(response);
                            if (response.service_info.status == "restarting"){
                                //
                            }
                            else if(response.service_info.status = "restart_succ"){
                                clearInterval(interval);
                                $(el).removeAttr('disabled');
                            }
                        });
                    }, 1000);
                },
                cancel: function () {
                    $.alert('Canceled!');
                }
            }
        });
    }
</script>
</html>